<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="100px">
          <el-form-item label="提交用户名：">
            <el-input v-model="listQuery.memberName" class="input-width" placeholder="请输入联系人姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="listQuery.mobilePhone" class="input-width" placeholder="请输入联系人电话"></el-input>
          </el-form-item>
          <el-form-item >
            <div class="input-width-btn">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearchList()">
                提交
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <el-button :type="state == 0 ? 'primary': ''" @click="tabToggle(0)">待审核</el-button>
      <el-button :type="state == 1 ? 'primary': ''" @click="tabToggle(1)">审核通过</el-button>
      <el-button :type="state == 2 ? 'primary': ''" @click="tabToggle(2)">审核不通过</el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="orderTable"
                :data="list"
                style="width: 100%;"
                v-loading="listLoading" border>
        <el-table-column label="序号" type="index"  width="60" align="center"></el-table-column>
        <el-table-column label="提交审核时间" width="120" align="center">
          <template slot-scope="scope">{{scope.row.createTime || '--'}}</template>
        </el-table-column>
        <el-table-column label="提交用户名" width="120" align="center">
          <template slot-scope="scope">{{scope.row.memberName || '--'}}</template>
        </el-table-column>
        <el-table-column label="真实姓名" width="100" align="center">
          <template slot-scope="scope">{{scope.row.name || '--'}}</template>
        </el-table-column>
        <el-table-column label="用户手机号" width="110" align="center">
          <template slot-scope="scope">{{scope.row.mobilePhone || '--'}}</template>
        </el-table-column>
        <el-table-column label="提交类型" width="80" align="center">
          <template slot-scope="scope">{{scope.row.type | formatType}}</template>
        </el-table-column>
        <el-table-column label="所在城市" width="120" align="center">
          <template slot-scope="scope">{{scope.row.address || '--'}}</template>
        </el-table-column>
        <el-table-column label="生日" width="120" align="center">
          <template slot-scope="scope">{{scope.row.birthday || '--'}}</template>
        </el-table-column>
        <el-table-column label="职业" width="120" align="center">
          <template slot-scope="scope">{{scope.row.profession || '--'}}</template>
        </el-table-column>
        <el-table-column label="副业" width="120" align="center">
          <template slot-scope="scope">{{scope.row.subBusiness || '--'}}</template>
        </el-table-column>
        <el-table-column label="优势" width="150" align="center">
          <template slot-scope="scope">{{scope.row.goodness || '--'}}</template>
        </el-table-column>
        <el-table-column label="俱乐部预设名称" width="150" align="center">
          <template slot-scope="scope">{{scope.row.clubName || '--'}}</template>
        </el-table-column>
        <el-table-column label="俱乐部卡号" width="120" align="center">
          <template slot-scope="scope">{{scope.row.clubCode || '--'}}</template>
        </el-table-column>
        <el-table-column label="留言" width="180" align="center">
          <template slot-scope="scope">{{scope.row.remark || '--'}}</template>
        </el-table-column>
        <el-table-column label="操作人" width="120" align="center">
          <template slot-scope="scope">{{scope.row.auditorName || '--'}}</template>
        </el-table-column>
        <el-table-column label="操作"  v-if="state == 0"  fixed="right" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="checkOk(scope.row)">通过</el-button>
            <el-button
              type="danger"
              @click="checkFailHandle(scope.row)">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :total="total">
      </el-pagination>
    </div>

    <!--决绝原因的dialog-->
    <el-dialog title="不通过原因" width="40%"  :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm">
        <el-form-item label="原因:" label-width="120px">
          <el-input type="textarea" v-model="dialogForm.remark"  :autosize="{ minRows: 4, maxRows: 6}" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkFailApi">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {formatDate} from '@/utils/tools';
  import { mapGetters } from 'vuex'
  import { Message } from 'element-ui'
  import requestApi from '@/api/index.js'
  const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    memberName: '',
    mobilePhone: '',
  };

  export default {
    name: "list",
    data() {
      return {
        listQuery: Object.assign({}, defaultListQuery),
        state: 0,
        list: [],
        total: null,
        listLoading: false, // todo: fix init data
        dialogFormVisible: false, // 拒绝弹窗
        dialogForm: {
          remark: '',
          clubCode: 0,
        },
      }
    },
    created() {
      this.getList();
    },
    computed: {
      ...mapGetters([
        'name',
      ])
    },
    filters: {
      formatCreateTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      formatType(value) {
        if (value === 0) {
          return '个人';
        } else if (value === 1) {
          return '商务';
        } else {
          return '未知';
        }
      },
    },
    methods: {
      handleSearchList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      // tab change
      tabToggle(type) {
        this.state = type;
        this.listQuery = Object.assign({}, defaultListQuery);
        this.list = [];
        this.getList();
      },
      getList() {
        this.listLoading = true;
        const param = this.listQuery;
        param.state = this.state;
        requestApi.getClubMemberList(param).then((res) => {
          if (res.code == 0) {
            this.list = res.rows;
            this.total = res.total;
          }
        })
        this.listLoading = false;
      },
      // 分页
      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },
      // 审核通过
      checkOk(row) {
        requestApi.clubMemberPass({ clubCode: row.clubCode }).then((res) => {
          if (res.code == 0) {
            Message({
              message: '俱乐部审核通过',
              type: 'success',
              duration: 3 * 1000
            })
            // 刷新页面
            this.getList();
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        })
      },
      // 审核不通过
      checkFailHandle(row) {
        this.dialogForm.clubCode = row.clubCode;
        this.dialogForm.remark = '';
        this.dialogFormVisible = true;
      },
      checkFailApi() {
        if (this.dialogForm.remark == '') {
          Message({
            message: '请填写不通过原因',
            type: 'error',
            duration: 3 * 1000
          })
          return;
        }
        requestApi.clubMemberFaild(this.dialogForm).then((res) => {
          if (res.code == 0) {
            Message({
              message: '操作成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.dialogForm.remark = '';
            this.dialogFormVisible = false;
            // 刷新页面
            this.getList();
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        })
      },
    }
  }
</script>
<style scoped>
  .input-width {
    width: 203px;
  }
  .input-width-btn {
    margin-left: 40px;
  }
  .success {
    color: #F56C6C;
  }
  .Info {
   color: #909399;
  }
  .success {
    color: #67C23A;
  }
</style>


